<template>
  <XtxDialog title="修改登录密码" v-model:visible="dialogVisible">
    <div class="address-edit">
      <form class="xtx-form-label">
        <div class="xtx-form-item">
          <div class="label">原始密码：</div>
          <div class="field">
            <input v-model="formData.oldPsw" type="password" class="input" placeholder="原始登录密码" autocomplete="off"/>
          </div>
        </div>
        <div class="xtx-form-item">
          <div class="label">新的密码：</div>
          <div class="field">
            <input v-model="formData.newPsw" type="password"  class="input" placeholder="请设置6至20位登录密码" autocomplete="off"/>
          </div>
        </div>
        <div class="xtx-form-item">
          <div class="label">确认密码：</div>
          <div class="field">
            <input v-model="formData.rePsw" type="password"  class="input" placeholder="再次输入新设置的密码" autocomplete="off"/>
          </div>
        </div>
      </form>
    </div>
    <!-- vue3.0 仅支持v-slot+template写法 -->
    <template v-slot:footer>
      <XtxButton @click="dialogVisible=false" type="gray" style="margin-right:20px">取消</XtxButton>
      <XtxButton @click="savePsw" type="primary">保存</XtxButton>
    </template>
  </XtxDialog>
</template>

<script>
import { reactive, ref } from 'vue'
import Message from '@/components/library/message'
export default {
  name: 'UpdatePsw',
  setup (props, { emit }) {
    const dialogVisible = ref(false)
    // 定义表单数据对象
    const formData = reactive({
      oldPsw: null, // 原密码
      newPsw: null, // 新密码
      rePsw: null // 确认密码
    })
    const open = () => {
      dialogVisible.value = true
    }
    const savePsw = () => {
      if (!formData.oldPsw || !formData.newPsw || !formData.rePsw) {
        Message({ type: 'warn', text: '请完善输入框内容' })
      } else {
        // 保存按钮点击后的逻辑操作
        if (formData.newPsw === formData.rePsw) {
          emit('on-update', formData)
          dialogVisible.value = false
          // 关闭对话框组件后，清空表单数据
          for (const key in formData) {
            formData[key] = null
          }
        } else {
          Message({ type: 'warn', text: '新设定密码与确认密码不一致' })
        }
      }
    }
    return { dialogVisible, formData, open, savePsw }
  }
}
</script>

<style lang="less" scoped>
  :deep(.xtx-form-item) {
    width: 100%;
  }
  input {
    outline: none;
    &::placeholder {
      color: #ccc;
      font-size: 14px;
    }
  }
  .xtx-form-item {
    :deep(.label) {
      width: 140px
    }
    :deep(.input:focus,.input:active) {
     border: 1px solid #e4e4e4;
    }
  }
</style>
